$(function () {
  // 定义全局变量 存放 发送请求后的要渲染的数据 result.data
  let Datas = null;
  let LeftScroll = null;
  init();
  function init() {
    renderMain();
    eventList();
  }

  // 渲染页面
  function renderMain() {
    // 3.2 判断  存入的数据的格式  {data:[],time:5454545};
    // 获取本地存储中的 数据 null 要么 字符串
    let localStr = localStorage.getItem("localData");
    if (!localStr) {
      // 不存在
      console.log("缓存不存在");
      getCategories();
    } else {
      // 存在 
      let localObj = JSON.parse(localStr);
      // 判断数据是否过期 过期时间 10s 
      // Date.now() 单位 毫秒 1s=1000ms
      if (Date.now() - localObj.time > 1000 * 10) {
        // 数据过期了
        console.log("数据过期了");
        getCategories();
      } else {
        // 没有过期
        console.log("使用旧的数据");
        // 获取旧的数据
        Datas = localObj.data;
        renderLeft();
        renderRight(0);
      }
    }
  }

  //获取分类页面的数据
  function getCategories() {
    $.get("categories", function (result) {    
      if (result.meta.status === 200) {
        //请求成功
        //渲染左侧菜单数据
        Datas = result.data;
        // 把数据存入到本地存储中
        let localObj = {
          data: Datas,
          time: Date.now()
        };
        localStorage.setItem("localData", JSON.stringify(localObj));
        
        renderLeft();   
        //渲染右侧内容  要循环渲染的数据
        renderRight(0);
      }
    })
  }

//把页面中所有的绑定事件的代码都放到方法中
function eventList(){
  //因为数据是动态生成的 所以绑定事件  采用事件委托
  $('.left_wrap').on('tap','li',function(){
    /* 
      1 激活选中 排他
      2 获取被点击的左侧菜单的li标签的索引
      3 动态去 加载右侧的 数据 关键在于 渲染的索引上！！！
       */
    $(this).addClass('active').siblings().removeClass('active');
    //使用zepto内置的方法来获取 dom 元素的索引
    let index=$(this).index();
    //根据被点击的索引 来渲染右侧的内容
    renderRight(index);
    // 左侧被点击的菜单 往上滚动置顶
    LeftScroll.scrollToElement(this);
  })
}

  //渲染左侧数据
  function renderLeft() {
    let leftArr = Datas;
    let leftHtml = template("leftTpl", {arr: leftArr});
    $(".left_wrap").html(leftHtml);
    // 初始化左侧的滚动条
    LeftScroll = new IScroll(".left_menu");
  };

  //右侧渲染
  function renderRight(index) {
   let rightArr = Datas[index].children;
   let rightHtml = template('rightTpl', {arr: rightArr});
    $('.right_content').html(rightHtml);  

    // 获取图片数组的长度
    let imgLength = $(".right_content img").length;
    $(".right_content img").on("load", function () {
      imgLength--;
      if (imgLength == 0) {
        // console.log("最后一张被初始化");
        let rightIscroll = new IScroll(".right_content");
      }
    });

    };
  




})